<template>
    <div :class="[{ 'fullscreen': s_fullScreen, 'shadow': boxShadow }]"
         class="v-note-wrapper markdown-body"
         :style="{'box-shadow': boxShadow ? boxShadowStyle : ''}">
        <!--工具栏-->
        <div class="v-note-op"
             v-show="toolbarsFlag"
             :style="{'background': toolbarsBackground}">
            <md-toolbar-left ref="toolbar_left"
                             :editable="editable"
                             :transition="transition"
                             :d_words="d_words"
                             @toolbar_left_click="toolbar_left_click"
                             @toolbar_left_addlink="toolbar_left_addlink"
                             :toolbars="toolbars"
                             @imgAdd="$imgAdd"
                             @imgDel="$imgDel"
                             @imgTouch="$imgTouch"
                             :image_filter="imageFilter"
                             :class="{'transition': transition}">
                <slot name="left-toolbar-before" slot="left-toolbar-before"/>
                <slot name="left-toolbar-after" slot="left-toolbar-after"/>
            </md-toolbar-left>
            <md-toolbar-right ref="toolbar_right"
                              :d_words="d_words"
                              @toolbar_right_click="toolbar_right_click"
                              :toolbars="toolbars"
                              :s_subfield="s_subfield"
                              :s_preview_switch="s_preview_switch"
                              :s_fullScreen="s_fullScreen"
                              :s_html_code="s_html_code"
                              :s_navigation="s_navigation"
                              :class="{'transition': transition}">
                <slot name="right-toolbar-before" slot="right-toolbar-before"/>
                <slot name="right-toolbar-after" slot="right-toolbar-after"/>
            </md-toolbar-right>
        </div>
        <!--编辑展示区域-->
        <div class="v-note-panel">
            <!--编辑区-->
            <div ref="vNoteEdit"
                 @scroll="$v_edit_scroll"
                 class="v-note-edit divarea-wrapper"
                 :class="{
                     'scroll-style': s_scrollStyle, 'scroll-style-border-radius': s_scrollStyle && !s_preview_switch && !s_html_code,
                     'single-edit': !s_preview_switch && !s_html_code, 'single-show': (!s_subfield && s_preview_switch) || (!s_subfield && s_html_code),
                      'transition': transition}"
                 @click="textAreaFocus">
                <div class="content-input-wrapper" :style="{'background-color': editorBackground}">
                    <!-- 双栏 -->
                    <md-auto-textarea ref="vNoteTextarea"
                                      :placeholder="placeholder ? placeholder : d_words.start_editor"
                                      class="content-input"
                                      :fontSize="fontSize"
                                      lineHeight="1.5"
                                      v-model="d_value"
                                      fullHeight
                                      :style="{'background-color': editorBackground}"></md-auto-textarea>
                </div>
            </div>
            <!--展示区-->
            <div :class="{'single-show': (!s_subfield && s_preview_switch) || (!s_subfield && s_html_code)}"
                 v-show="s_preview_switch || s_html_code"
                 class="v-note-show">
                <div ref="vShowContent"
                     v-html="d_render"
                     v-show="!s_html_code"
                     :class="{'scroll-style': s_scrollStyle, 'scroll-style-border-radius': s_scrollStyle}"
                     class="v-show-content"
                     :style="{'background-color': previewBackground}">
                </div>
                <div v-show="s_html_code"
                     :class="{'scroll-style': s_scrollStyle, 'scroll-style-border-radius': s_scrollStyle}"
                     class="v-show-content-html"
                     :style="{'background-color': previewBackground}">
                    {{d_render}}
                </div>
            </div>

            <!--标题导航-->
            <transition name="slideTop">
                <div v-show="s_navigation"
                     class="v-note-navigation-wrapper"
                     :class="{'transition': transition}">
                    <div class="v-note-navigation-title">
                        {{d_words.navigation_title}}
                        <i @click="toolbar_right_click('navigation')"
                           class="fa fa-mavon-times v-note-navigation-close"
                           aria-hidden="true"></i>
                    </div>
                    <div ref="navigationContent" class="v-note-navigation-content"
                         :class="{'scroll-style': s_scrollStyle}">
                    </div>
                </div>
            </transition>

        </div>
        <!--帮助文档-->
        <transition name="fade">
            <div ref="help">
                <div @click="toolbar_right_click('help')"
                     class="v-note-help-wrapper"
                     v-if="s_help">
                    <div class="v-note-help-content markdown-body"
                         :class="{'shadow': boxShadow}">
                        <i @click.stop.prevent="toolbar_right_click('help')" class="fa fa-mavon-times"
                           aria-hidden="true"></i>
                        <div class="scroll-style v-note-help-show" v-html="d_help"></div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 预览图片 -->
        <transition name="fade">
            <div @click="d_preview_imgsrc=null"
                 class="v-note-img-wrapper"
                 v-if="d_preview_imgsrc">
                <img :src="d_preview_imgsrc" alt="none">
            </div>
        </transition>
        <!--阅读模式-->
        <div :class="{'show': s_readmodel}"
             class="v-note-read-model scroll-style"
             ref="vReadModel">
            <div ref="vNoteReadContent"
                 class="v-note-read-content"
                 v-html="d_render">
            </div>
        </div>
    </div>
</template>

<script>
    import markdown from './lib/mixins/markdown';
    import mdMixins from './lib/mixins/mdMixins';
    import mdAutoTextarea from "./components/mdAutoTextarea";
    import mdToolbarLeft from './components/mdToolbarLeft.vue';
    import mdToolbarRight from './components/mdToolbarRight.vue';
    import {keydownListen} from './lib/core/keydown-listen.js';
    import hljsCss from './lib/core/hljs/lang.hljs.css.js';
    import {
        fullscreenchange,
        /* windowResize, */
        scrollLink,
        insertTextAtCaret,
        getNavigation,
        insertTab,
        unInsertTab,
        insertOl,
        insertUl,
        insertEnter,
        removeLine,
        loadLink,
        loadScript,
        ImagePreviewListener
    } from './lib/core/extra-function.js';
    import {stopEvent} from './lib/util.js';
    import {toolbar_left_click, toolbar_left_addlink} from './lib/toolbar_left_click.js';
    import {toolbar_right_click} from './lib/toolbar_right_click.js';
    import {CONFIG} from './lib/config.js';

    const xss = require('xss');
    export default {
        name: 'markdownEditor',
        mixins: [markdown, mdMixins],
        components: {
            mdToolbarLeft,
            mdToolbarRight,
            mdAutoTextarea
        },
        props: {
            scrollStyle: {  // 是否渲染滚动条样式(webkit)
                type: Boolean,
                default: true
            },
            boxShadow: { // 是否添加阴影
                type: Boolean,
                default: true
            },
            transition: { // 是否开启动画过渡
                type: Boolean,
                default: true
            },
            autofocus: { // 是否自动获取焦点
                type: Boolean,
                default: true
            },
            fontSize: { // 字体大小
                type: String,
                default: '14px'
            },
            toolbarsBackground: { // 工具栏背景色
                type: String,
                default: '#ffffff'
            },
            editorBackground: { // TODO: 编辑栏背景色
                type: String,
                default: '#ffffff'
            },
            previewBackground: { // 预览栏背景色
                type: String,
                default: '#fbfbfb'
            },
            boxShadowStyle: { // 阴影样式
                type: String,
                default: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
            },
            help: {
                type: String,
                default: null
            },
            value: { // 初始 value
                type: String,
                default: ''
            },
            language: {  // 初始语言
                type: String,
                default: 'zh-CN'
            },
            subfield: {
                type: Boolean,
                default: true
            },
            navigation: {
                type: Boolean,
                default: false
            },
            defaultOpen: {
                type: String,
                default: null
            },
            editable: { // 是否开启编辑
                type: Boolean,
                default: true
            },
            toolbarsFlag: { // 是否开启工具栏
                type: Boolean,
                default: true
            },
            toolbars: { // 工具栏
                type: Object,
                default() {
                    return CONFIG.toolbars
                }
            },
            xssOptions: { // 工具栏
                type: Object,
                default() {
                    return null
                }
            },
            codeStyle: { // <code></code> 样式
                type: String,
                default() {
                    return 'github';
                }
            },
            placeholder: { // 编辑器默认内容
                type: String,
                default: null
            },
            ishljs: {
                type: Boolean,
                default: true
            },
            externalLink: {
                type: [Object, Boolean],
                default: true
            },
            imageFilter: {
                type: Function,
                default: null
            },
            imageClick: {
                type: Function,
                default: null
            },
            tabSize: {
                type: Number,
                default: 0
            },
            shortCut: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                s_right_click_menu_show: false,
                right_click_menu_top: 0,
                right_click_menu_left: 0,
                s_subfield: (() => {
                    return this.subfield;
                })(),
                s_autofocus: true,
                // 标题导航
                s_navigation: (() => {
                    return this.navigation;
                })(),
                s_scrollStyle: (() => {
                    return this.scrollStyle
                })(),// props 是否渲染滚动条样式
                d_value: '',// props 文本内容
                d_render: '',// props 文本内容render
                s_preview_switch: (() => {
                    let default_open_ = this.defaultOpen;
                    if (!default_open_) {
                        default_open_ = this.subfield ? 'preview' : 'edit';
                    }
                    return default_open_ === 'preview' ? true : false;
                })(), // props true 展示编辑 false展示预览
                s_fullScreen: false,// 全屏编辑标志
                s_help: false,// markdown帮助
                s_html_code: false,// 分栏情况下查看html
                d_help: null,
                d_words: null,
                edit_scroll_height: -1,
                s_readmodel: false,
                s_table_enter: false, // 回车事件是否在表格中执行
                d_history: (() => {
                    let temp_array = []
                    temp_array.push(this.value)
                    return temp_array;
                })(), // 编辑记录
                d_history_index: 0, // 编辑记录索引
                currentTimeout: '',
                d_image_file: [],
                d_preview_imgsrc: null, // 图片预览地址
                s_external_link: {
                    markdown_css: function () {
                        return 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.9.0/github-markdown.min.css';
                    },
                    hljs_js: function () {
                        return 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js';
                    },
                    hljs_lang: function (lang) {
                        return 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/' + lang + '.min.js';
                    },
                    hljs_css: function (css) {
                        if (hljsCss[css]) {
                            return 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/' + css + '.min.css';
                        }
                        return '';
                    },
                    katex_js: function () {
                        return 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.js';
                    },
                    katex_css: function () {
                        return 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.css';
                    }
                },
                p_external_link: {},
                textarea_selectionEnd: 0,
                textarea_selectionEnds: [0],
            };
        },
        created() {
            var _this = this;
            // 初始化语言
            this.initLanguage();
            this.initExternalFuc();
            this.$nextTick(() => {
                // 初始化Textarea编辑开关
                // _this.editableTextarea();
            })
        },
        mounted() {
            var _this = this;
            this.$el.addEventListener('paste', function (e) {
                _this.$paste(e);
            })
            this.$el.addEventListener('drop', function (e) {
                _this.$drag(e);
            })
            // 浏览器siz大小
            /* windowResize(this); */
            keydownListen(this);
            // 图片预览事件监听
            ImagePreviewListener(this);
            // 设置默认焦点
            if (this.autofocus) {
                this.getTextareaDom().focus();
            }
            // fullscreen事件
            fullscreenchange(this);
            this.d_value = this.value;
            // 将help添加到末尾
            document.body.appendChild(this.$refs.help);
            this.loadExternalLink('markdown_css', 'css');
            this.loadExternalLink('katex_css', 'css')
            this.loadExternalLink('katex_js', 'js', function () {
                _this.iRender(true);
            })
            this.loadExternalLink('hljs_js', 'js', function () {
                _this.iRender(true);
            })

            if (!(typeof _this.externalLink === 'object' && typeof _this.externalLink['markdown_css'] === 'function')) {
                // 没有外部文件要来接管markdown样式，可以更改markdown样式。
                _this.codeStyleChange(_this.codeStyle, true)
            }
        },
        beforeDestroy() {
            document.body.removeChild(this.$refs.help);
        },
        getMarkdownIt() {
            return this.mixins[0].data().markdownIt
        },
        methods: {
            loadExternalLink(name, type, callback) {
                if (typeof this.p_external_link[name] !== 'function') {
                    if (this.p_external_link[name] != false) {
                        console.error('external_link.' + name, 'is not a function, if you want to disabled this error log, set external_link.' + name, 'to function or false');
                    }
                    return;
                }
                var _obj = {
                    'css': loadLink,
                    'js': loadScript
                };
                if (_obj.hasOwnProperty(type)) {
                    _obj[type](this.p_external_link[name](), callback);
                }
            },
            initExternalFuc() {
                var _this = this;
                var _external_ = ['markdown_css', 'hljs_js', 'hljs_css', 'hljs_lang', 'katex_js', 'katex_css'];
                var _type_ = typeof _this.externalLink;
                var _is_object = (_type_ === 'object');
                var _is_boolean = (_type_ === 'boolean');
                for (var i = 0; i < _external_.length; i++) {
                    if ((_is_boolean && !_this.externalLink) || (_is_object && _this.externalLink[_external_[i]] === false)) {
                        _this.p_external_link[_external_[i]] = false;
                    } else if (_is_object && typeof _this.externalLink[_external_[i]] === 'function') {
                        _this.p_external_link[_external_[i]] = _this.externalLink[_external_[i]];
                    } else {
                        _this.p_external_link[_external_[i]] = _this.s_external_link[_external_[i]];
                    }
                }
            },
            textAreaFocus() {
                this.$refs.vNoteTextarea.$refs.vTextarea.focus();
            },
            $drag($e) {
                var dataTransfer = $e.dataTransfer;
                if (dataTransfer) {
                    var files = dataTransfer.files;
                    if (files.length > 0) {
                        $e.preventDefault();
                        this.$refs.toolbar_left.$imgFilesAdd(files);
                    }
                }
            },
            $paste($e) {
                var clipboardData = $e.clipboardData;
                if (clipboardData) {
                    var items = clipboardData.items;
                    if (!items) return;
                    var types = clipboardData.types || [];
                    var item = null;
                    for (var i = 0; i < types.length; i++) {
                        if (types[i] === 'Files') {
                            item = items[i];
                            break;
                        }
                    }
                    if (item && item.kind === 'file') {
                        // prevent filename being pasted parallel along
                        // with the image pasting process
                        stopEvent($e)
                        var oFile = item.getAsFile();
                        this.$refs.toolbar_left.$imgFilesAdd([oFile]);
                    }
                }
            },
            $imgTouch(file) {
                var _this = this;
                // TODO 跳转到图片位置
            },
            $imgDel(file) {
                this.markdownIt.image_del(file[1]);
                // 删除所有markdown中的图片
                let fileReg = file[0]
                let reg = new RegExp(`\\!\\[${file[1]._name}\\]\\(${fileReg}\\)`, "g")

                this.d_value = this.d_value.replace(reg, '');
                this.iRender();
                this.$emit('imgDel', file);
            },
            $imgAdd(pos, $file, isinsert) {
                if (isinsert === undefined) isinsert = true;
                var _this = this;
                if (this.__rFilter == null) {
                    // this.__rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
                    this.__rFilter = /^image\//i;
                }
                this.__oFReader = new FileReader();
                this.__oFReader.onload = function (oFREvent) {
                    _this.markdownIt.image_add(pos, oFREvent.target.result);
                    $file.miniurl = oFREvent.target.result;
                    if (isinsert === true) {
                        // 去除特殊字符
                        $file._name = $file.name.replace(/[\[\]\(\)\+\{\}&\|\\\*^%$#@\-]/g, '');

                        _this.insertText(_this.getTextareaDom(),
                            {
                                prefix: '![' + $file._name + '](' + pos + ')',
                                subfix: '',
                                str: ''
                            });
                        _this.$nextTick(function () {
                            _this.$emit('imgAdd', pos, $file);
                        })
                    }
                }
                if ($file) {
                    var oFile = $file;
                    if (this.__rFilter.test(oFile.type)) {
                        this.__oFReader.readAsDataURL(oFile);
                    }
                }
            },
            $imgUpdateByUrl(pos, url) {
                var _this = this;
                this.markdownIt.image_add(pos, url);
                this.$nextTick(function () {
                    _this.d_render = this.markdownIt.render(this.d_value);
                })
            },
            $imgAddByUrl(pos, url) {
                if (this.$refs.toolbar_left.$imgAddByUrl(pos, url)) {
                    this.$imgUpdateByUrl(pos, url);
                    return true;
                }
                return false;
            },
            $img2Url(fileIndex, url) {
                // x.replace(/(\[[^\[]*?\](?=\())\(\s*(\.\/2)\s*\)/g, "$1(http://path/to/png.png)")
                var reg_str = "/(!\\[\[^\\[\]*?\\]\(?=\\(\)\)\\(\\s*\(" + fileIndex + "\)\\s*\\)/g"
                var reg = eval(reg_str);
                this.d_value = this.d_value.replace(reg, "$1(" + url + ")")
                this.$refs.toolbar_left.$changeUrl(fileIndex, url)
                this.iRender()
            },
            $imglst2Url(imglst) {
                if (imglst instanceof Array) {
                    for (var i = 0; i < imglst.length; i++) {
                        this.$img2Url(imglst[i][0], imglst[i][1]);
                    }
                }
            },
            toolbar_left_click(_type) {
                toolbar_left_click(_type, this);
            },
            toolbar_left_addlink(_type, text, link) {
                toolbar_left_addlink(_type, text, link, this);
            },
            toolbar_right_click(_type) {
                toolbar_right_click(_type, this);
            },
            getNavigation(_this, full) {
                return getNavigation(_this, full);
            },
            // @event
            // 修改数据触发 （val ， val_render）
            change(val, render) {
                this.$emit('change', val, render)
            },
            // 切换全屏触发 （status , val）
            fullscreen(status, val) {
                this.$emit('fullScreen', status, val)
            },
            // 打开阅读模式触发（status , val）
            readmodel(status, val) {
                this.$emit('readModel', status, val)
            },
            // 切换阅读编辑触发 （status , val）
            previewtoggle(status, val) {
                this.$emit('previewToggle', status, val)
            },
            // 切换分栏触发 （status , val）
            subfieldtoggle(status, val) {
                this.$emit('subfieldToggle', status, val)
            },
            // 切换htmlcode触发 （status , val）
            htmlcode(status, val) {
                this.$emit('htmlCode', status, val)
            },
            // 打开 , 关闭 help触发 （status , val）
            helptoggle(status, val) {
                this.$emit('helpToggle', status, val)
            },
            // 监听ctrl + s
            save(val, render) {
                this.$emit('save', val, render)
            },
            // 导航栏切换
            navigationtoggle(status, val) {
                this.$emit('navigationToggle', status, val)
            },
            $toolbar_right_read_change_status() {
                this.s_readmodel = !this.s_readmodel
                if (this.readmodel) {
                    this.readmodel(this.s_readmodel, this.d_value)
                }
                if (this.s_readmodel && this.toolbars.navigation) {
                    this.getNavigation(this, true)
                }
            },
            // ---------------------------------------
            // 滚动条联动
            $v_edit_scroll($event) {
                scrollLink($event, this);
            },
            // 获取textarea dom节点
            getTextareaDom() {
                return this.$refs.vNoteTextarea.$refs.vTextarea;
            },
            // 工具栏插入内容
            insertText(obj, {prefix, subfix, str, type}) {
                // if (this.s_preview_switch) {

                insertTextAtCaret(obj, {prefix, subfix, str, type}, this);
            },
            insertTab() {
                insertTab(this, this.tabSize)
            },
            insertOl() {
                insertOl(this)
            },
            removeLine() {
                removeLine(this)
            },
            insertUl() {
                insertUl(this)
            },
            unInsertTab() {
                unInsertTab(this, this.tabSize)
            },
            insertEnter(event) {
                insertEnter(this, event)
            },
            saveHistory() {
                this.d_history.splice(this.d_history_index + 1, this.d_history.length)
                this.d_history.push(this.d_value)
                this.textarea_selectionEnds.splice(this.d_history_index + 1, this.textarea_selectionEnds.length)
                this.textarea_selectionEnds.push(this.textarea_selectionEnd)
                this.d_history_index = this.d_history.length - 1
            },
            saveSelectionEndsHistory() {
                const textarea = this.$refs.vNoteTextarea && this.$refs.vNoteTextarea.$el.querySelector('textarea');
                this.textarea_selectionEnd = textarea ? textarea.selectionEnd : this.textarea_selectionEnd;
            },
            initLanguage() {
                let lang = CONFIG.langList.indexOf(this.language) >= 0 ? this.language : 'zh-CN';
                var _this = this;
                _this.$render(CONFIG[`help_${lang}`], function (res) {
                    _this.d_help = res;
                })
                this.d_words = CONFIG[`words_${lang}`];
            },
            // 编辑开关
            editableTextarea() {
                let text_dom = this.$refs.vNoteTextarea.$refs.vTextarea;
                if (this.editable) {
                    text_dom.removeAttribute('disabled');
                } else {
                    text_dom.setAttribute('disabled', 'disabled');
                }
            },
            codeStyleChange(val, isInit) {
                isInit = isInit ? isInit : false;
                if (typeof this.p_external_link.hljs_css !== 'function') {
                    if (this.p_external_link.hljs_css != false) {
                        console.error('external_link.hljs_css is not a function, if you want to disabled this error log, set external_link.hljs_css to function or false');
                    }
                    return;
                }
                var url = this.p_external_link.hljs_css(val);
                if (url.length === 0 && isInit) {
                    console.warn('hljs color scheme', val, 'do not exist, loading default github');
                    url = this.p_external_link.hljs_css('github')
                }
                if (url.length > 0) {
                    loadLink(url)
                } else {
                    console.warn('hljs color scheme', val, 'do not exist, hljs color scheme will not change');
                }
            },
            iRender(toggleChange) {
                var _this = this;
                this.$render(_this.d_value, function (res) {
                    // render
                    _this.d_render = res;
                    // change回调  toggleChange == false 时候触发change回调
                    if (!toggleChange) {
                        if (_this.change) _this.change(_this.d_value, _this.d_render);
                    }
                    // 改变标题导航
                    if (_this.s_navigation) getNavigation(_this, false);
                    // v-model 语法糖
                    _this.$emit('input', _this.d_value)
                    // 塞入编辑记录数组
                    if (_this.d_value === _this.d_history[_this.d_history_index]) return
                    window.clearTimeout(_this.currentTimeout)
                    _this.currentTimeout = setTimeout(() => {
                        _this.saveHistory();
                    }, 500);
                })
            },
            // 清空上一步 下一步缓存
            $emptyHistory() {
                this.d_history = [this.d_value] // 编辑记录
                this.d_history_index = 0 // 编辑记录索引
            }
        },
        watch: {
            d_value: function (val, oldVal) {
                this.saveSelectionEndsHistory();
                this.iRender();
            },
            value: function (val, oldVal) {
                // Escaping all XSS characters
                //         escapeHtml (html) {
                //             return html
                //         }
                if (this.xssOptions) {
                    val = xss(val, this.xssOptions);
                }

                if (val !== this.d_value) {
                    this.d_value = val
                }
            },
            subfield: function (val, oldVal) {
                this.s_subfield = val
            },
            d_history_index() {
                if (this.d_history_index > 20) {
                    this.d_history.shift()
                    this.d_history_index = this.d_history_index - 1
                }
                this.d_value = this.d_history[this.d_history_index]
            },
            language: function (val) {
                this.initLanguage();
            },
            editable: function () {
                this.editableTextarea();
            },
            defaultOpen: function (val) {
                let default_open_ = val;
                if (!default_open_) {
                    default_open_ = this.subfield ? 'preview' : 'edit';
                }
                return this.s_preview_switch = default_open_ === 'preview' ? true : false;
            },
            codeStyle: function (val) {
                this.codeStyleChange(val)
            }
        }
    };
</script>
<style lang="stylus" rel="stylesheet/stylus">
    @import "lib/css/scroll.styl"
    @import "lib/css/mavon-editor.styl"
</style>
<style lang="css" scoped>
    .auto-textarea-wrapper {
        height: 100%;
    }
</style>
